<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DDD事件模型管理-ER图</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/AdminLTE-3.0.5/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="/dist/admin/css/optimization.css">
    <style>
        .room-cell {
            display: inline-block;
            table-layout: fixed;
            overflow: hidden;
            text-overflow: ellipsis; /* 加省略号 */
            white-space: nowrap; /* 强制不换行 */

            width: 100%;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">Home</a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->

            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-bell"></i>
                    <span class="badge badge-warning navbar-badge">个人操作</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-item dropdown-header">操作面板</span>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-envelope mr-2"></i> 个人资料
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-file mr-2"></i> 3 new reports
                        <span class="float-right text-muted text-sm">2 days</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="/adminRest/v1/token?_ajax_method=DELETE" class="dropdown-item dropdown-footer"
                       onclick="logout(this);"
                       data-rest-type="DELETE">退出登录</a>
                </div>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link">
            <img src="/AdminLTE-3.0.5/dist/img/AdminLTELogo.png"
                 alt="AdminLTE Logo"
                 class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">数据模型管理系统</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user (optional) -->

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->

                    <li class="nav-header" id="sidebar-menu"></li>

                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>业务事件 - 数据模型 -ER图</h1>
                    </div>

                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <a class="btn btn-sm btn-outline-primary"
                               onclick="show_scope('update_columns');">只显示插入更新字段</a>
                            <a class="btn btn-sm btn-outline-primary" onclick="show_scope('columns');">显示全部字段</a>
                            <div class="card-tools">

                            </div>
                        </div>
                        <div id="myDiagramDiv"
                             style="background-color: white; border: solid 1px black; width: 100%; height: 700px"></div>
                        <!-- /.card-header -->
                        <div class="card-body table-responsive p-0">
                        </div>

                        <!-- /.card-body -->
                        <div class="card-footer clearfix" id="pagination">

                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
        </section>

        <section class="content" style="display: none;">
            <textarea class="text-a"></textarea>
            <textarea class="text-b"></textarea>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->


<!-- jQuery -->
<script src="/AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>
<script src="/plugins/jquery-tmpl/jquery.tmpl.js"></script>
<script>
    window.sideBarPath = '/admin/event/list.html';
</script>

<link rel="stylesheet" href="/plugins/jquery-toast-plugin-1.3.2/dist/jquery.toast.min.css">
<script src="/plugins/jquery-toast-plugin-1.3.2/dist/jquery.toast.min.js"></script>
<script src="/dist/js/admin.common.js"></script>
<script src="https://unpkg.com/gojs@2.1/release/go.js"></script>
<script id="sidebar-level-1" type="text/x-jquery-tmpl">
  {{if $data._child}}
  <li class="nav-item has-treeview">
    <a href="${pathname}" class="nav-link">
      <i class="nav-icon fas fa-tree"></i>
      <p>
        ${title}
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      {{tmpl($data._child) '#sidebar-level-1'}}
    </ul>
  </li>
  {{else}}
  <li class="nav-item">
    <a href="${pathname}" class="nav-link">
      <i class="nav-icon far fa-circle"></i>
      <p>
        ${title}
      </p>
    </a>
  </li>
  {{/if}}


</script>
<script>

    function init(nodeDataArray, linkDataArray) {
        if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
        var $ = go.GraphObject.make;  // for conciseness in defining templates

        myDiagram =
            $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
                {
                    allowDelete: false,
                    allowCopy: false,
                    layout: $(go.ForceDirectedLayout),
                    "undoManager.isEnabled": true
                });

        var colors = {
            'red': '#be4b15',
            'green': '#52ce60',
            'blue': '#6ea5f8',
            'lightred': '#fd8852',
            'lightblue': '#afd4fe',
            'lightgreen': '#b9e986',
            'pink': '#faadc1',
            'purple': '#d689ff',
            'orange': '#fdb400',
        }

        // the template for each attribute in a node's array of item data
        var itemTempl =
            $(go.Panel, "Horizontal",
                $(go.Shape,
                    {desiredSize: new go.Size(15, 15), strokeJoin: "round", strokeWidth: 3, stroke: null, margin: 2},
                    new go.Binding("figure", "figure"),
                    new go.Binding("fill", "color"),
                    new go.Binding("stroke", "color")),
                $(go.TextBlock,
                    {
                        stroke: "#333333",
                        font: "bold 14px sans-serif"
                    },
                    new go.Binding("text", "name"))
            );

        // define the Node template, representing an entity
        myDiagram.nodeTemplate =
            $(go.Node, "Auto",  // the whole node panel
                {
                    selectionAdorned: true,
                    resizable: true,
                    layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
                    fromSpot: go.Spot.AllSides,
                    toSpot: go.Spot.AllSides,
                    isShadowed: true,
                    shadowOffset: new go.Point(3, 3),
                    shadowColor: "#C5C1AA"
                },
                new go.Binding("location", "location").makeTwoWay(),
                // whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
                // clear out any desiredSize set by the ResizingTool.
                new go.Binding("desiredSize", "visible", function (v) {
                    return new go.Size(NaN, NaN);
                }).ofObject("LIST"),
                // define the node's outer shape, which will surround the Table
                $(go.Shape, "RoundedRectangle",
                    {fill: 'white', stroke: "#eeeeee", strokeWidth: 3}),
                $(go.Panel, "Table",
                    {margin: 8, stretch: go.GraphObject.Fill},
                    $(go.RowColumnDefinition, {row: 0, sizing: go.RowColumnDefinition.None}),
                    // the table header
                    $(go.TextBlock,
                        {
                            row: 0, alignment: go.Spot.Center,
                            margin: new go.Margin(0, 24, 0, 2),  // leave room for Button
                            font: "bold 16px sans-serif"
                        },
                        new go.Binding("text", "key")),
                    // the collapse/expand button
                    $("PanelExpanderButton", "LIST",  // the name of the element whose visibility this button toggles
                        {row: 0, alignment: go.Spot.TopRight}),
                    // the list of Panels, each showing an attribute
                    $(go.Panel, "Vertical",
                        {
                            name: "LIST",
                            row: 1,
                            padding: 3,
                            alignment: go.Spot.TopLeft,
                            defaultAlignment: go.Spot.Left,
                            stretch: go.GraphObject.Horizontal,
                            itemTemplate: itemTempl
                        },
                        new go.Binding("itemArray", "items"))
                )  // end Table Panel
            );  // end Node

        // define the Link template, representing a relationship
        myDiagram.linkTemplate =
            $(go.Link,  // the whole link panel
                {
                    selectionAdorned: true,
                    layerName: "Foreground",
                    reshapable: true,
                    routing: go.Link.AvoidsNodes,
                    corner: 5,
                    curve: go.Link.JumpOver
                },
                $(go.Shape,  // the link shape
                    {stroke: "#303B45", strokeWidth: 2.5}),
                $(go.TextBlock,  // the "from" label
                    {
                        textAlign: "center",
                        font: "bold 14px sans-serif",
                        stroke: "#1967B3",
                        segmentIndex: 0,
                        segmentOffset: new go.Point(NaN, NaN),
                        segmentOrientation: go.Link.OrientUpright
                    },
                    new go.Binding("text", "text")),
                $(go.TextBlock,  // the "to" label
                    {
                        textAlign: "center",
                        font: "bold 14px sans-serif",
                        stroke: "#1967B3",
                        segmentIndex: -1,
                        segmentOffset: new go.Point(NaN, NaN),
                        segmentOrientation: go.Link.OrientUpright
                    },
                    new go.Binding("text", "toText"))
            );

        // create the model for the E-R diagram
        // var nodeDataArray = [
        //     {
        //         key: "Products",
        //         items: [{ name: "ProductID", iskey: true, figure: "Decision", color: colors.red },
        //             { name: "ProductName", iskey: false, figure: "Hexagon", color: colors.blue },
        //             { name: "SupplierID", iskey: false, figure: "Decision", color: "purple" },
        //             { name: "CategoryID", iskey: false, figure: "Decision", color: "purple" }]
        //     },
        //     {
        //         key: "Suppliers",
        //         items: [{ name: "SupplierID", iskey: true, figure: "Decision", color: colors.red },
        //             { name: "CompanyName", iskey: false, figure: "Hexagon", color: colors.blue },
        //             { name: "ContactName", iskey: false, figure: "Hexagon", color: colors.blue },
        //             { name: "Address", iskey: false, figure: "Hexagon", color: colors.blue }]
        //     },
        //     {
        //         key: "Categories",
        //         items: [{ name: "CategoryID", iskey: true, figure: "Decision", color: colors.red },
        //             { name: "CategoryName", iskey: false, figure: "Hexagon", color: colors.blue },
        //             { name: "Description", iskey: false, figure: "Hexagon", color: colors.blue },
        //             { name: "Picture", iskey: false, figure: "TriangleUp", color: colors.pink }]
        //     },
        //     {
        //         key: "Order Details",
        //         items: [{ name: "OrderID", iskey: true, figure: "Decision", color: colors.red },
        //             { name: "ProductID", iskey: true, figure: "Decision", color: colors.red },
        //             { name: "UnitPrice", iskey: false, figure: "Circle", color: colors.green },
        //             { name: "Quantity", iskey: false, figure: "Circle", color: colors.green },
        //             { name: "Discount", iskey: false, figure: "Circle", color: colors.green }]
        //     },
        // ];
        // var linkDataArray = [
        //     { from: "Products", to: "Suppliers", text: "0..N", toText: "1" }
        // ];
        myDiagram.model = $(go.GraphLinksModel,
            {
                copiesArrays: true,
                copiesArrayObjects: true,
                nodeDataArray: nodeDataArray,
                linkDataArray: linkDataArray
            });
    }


    let searchParams = new URLSearchParams(window.location.search);
    $.ajax({
        // url: "/adminRest/v1/ddd_er?type=stream_ids&search=8722,30053&scope=update_columns",
        url: "/adminRest/v1/ddd_er?" + searchParams,
        success: function (ret) {
            init(ret.data.nodeData, ret.data.linkData);
        }
    })

    function show_scope(scope) {
        searchParams.delete("scope");
        searchParams.append("scope", scope);

        console.log(window.location);
        window.location.href = window.location.origin + window.location.pathname + '?' + searchParams;
    }
</script>

</body>
</html>
